<template>
  <div>
    <Card>
      <p slot="title" class="card-title">
        <Icon type="home"></Icon>
        <span>日志管理</span>
      </p>
      <div>
        <template>
          <Form ref="search" :model="search" :label-width="80">
            <Row>
              <Col span="8">
                <FormItem label="关键字：" prop="content">
                  <Input v-model="search.content" placeholder="内容关键字"></Input>
                </FormItem>
              </Col>
              <Col span="5">
                <FormItem label="创建时间:" prop="startDate">
                  <DatePicker
                    format="yyyy-MM-dd"
                    type="date"
                    placeholder="开始时间"
                    :editable="false"
                    v-model="search.startDate"
                    @on-change="search.startDate=$event"
                    :options="endDateoptions"
                    style="width:200px"
                  ></DatePicker>
                </FormItem>
              </Col>
              <Col span="4">
                <FormItem :label-width="0" prop="endDate">
                  <DatePicker
                    format="yyyy-MM-dd"
                    type="date"
                    placeholder="结束时间"
                    v-model="search.endDate"
                    @on-change="search.endDate=$event"
                    :editable="false"
                    style="width:200px"
                    :options="endDateoptions"
                  ></DatePicker>
                </FormItem>
              </Col>

               <Button type="primary" @click="logData=initTableData();getData()">查詢</Button>
            </Row>
          </Form>
          <Table
            ref="table"
            border
            class="margin-bottom-10"
            :columns="columns"
            :loading="setting.loading"
            :data="logData.data"
          ></Table>
          <Page
            :total="logData.total"
            size="small"
            show-total
            show-elevator
            class="tr"
            @on-change="pageChange"
            :current.sync="logData.current"
            :page-size="logData.size"
          ></Page>
        </template>
      </div>
    </Card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search: {},
      setting: {
        loading: false
      },
      endDateoptions: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      },
      logData: this.initTableData(),
      columns: [
        { title: "日期", key: "createdAt", width: "160" },
        { title: "内容", key: "content" }
      ]
    };
  },
  created() {
    this.getData();
  },
  methods: {
    initTableData() {
      return {
        data: [],
        current: 1,
        size: 10
      };
    },
    getData() {
      this.setting.loading = true;
      var url = "/log/list/{pageNo}";
      var ps = {};
      ps = Object.assign(ps, this.search);

      this.post(url, ps, { pageNo: this.logData.current }).then(res => {
        this.setting.loading = false;
        if (this.checkIsSsuccess(res)) {
          this.logData.data = res.data.content;
          this.logData.total = res.data.totalElements;
          this.logData.totalPages = res.data.totalPages;
        } else {
          this.$Message.error({
            content: res["msg"],
            duration: 0,
            closable: true
          });
        }
      });
    },
    pageChange() {
      this.getData();
    }
  }
};
</script>